<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul class="nav">
        <li>知否知否，应是等你好久11</li>
        <li class="demo">知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li class="demo">知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li class="demo">生僻字</li>
        <li class="demo">生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    爱好: <input type="checkbox" name="fav" id="">打篮球
    <input type="checkbox" name="fav" id="" checked>羽毛球
    <input type="checkbox" name="fav" id="">乒乓球
    <input type="checkbox" name="fav" id="" checked>桌球

    <script>
        // var demo1 = document.getElementsByClassName('demo');
        // console.log(demo1);
        // console.log(demo1[0]);
        console.log(document.querySelector(".demo"));
        console.log(document.querySelectorAll(".nav .demo"));
        console.log(document.querySelectorAll("input:checked"));
    </script>
</body>

</html>